


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css"> 
    html{height:100%} 
    body{height:100%;margin:0px;padding:0px} 
    #container{height:90%} 
    .anchorBL{display:none}
    </style> 
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=73DuNdRUxPqOgE5s7DBQCogE3npk8Uzo&services=&t=20200826150406"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
  <div id="container"></div>
  <!-- <div>11</div> -->
  <button class="toggle">切换视角</button>
</body>
<script type="text/javascript">

  $(function(){


      // 创建地图实例 
      var mp = new BMap.Map("container", {enableMapClick:false});  //enableMapClick取消点击地址出现详情
      // 创建点坐标 
      var point = new BMap.Point(116.3964,39.9093);
      // 初始化地图，设置中心点坐标和地图级别 
      mp.centerAndZoom(point, 10);
      mp.disableDoubleClickZoom(); //禁止双击变大
      mp.disablePinchToZoom(); //禁止双指缩放
      //mp.enableDoubleClickZoom(); //打开双击变大
      //mp.disableDragging();     //禁止拖拽
      //mp.enableDragging();   //开启拖拽
      //mp.disableScrollWheelZoom();//禁止缩放
      //撒点
      function update() {
          var ctx = this.canvas.getContext("2d");

          if (!ctx) {
              return;
          }

          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

          var temp = {};
          ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
          ctx.beginPath();
          var data = [
              new BMap.Point(113.262032,23.157345),
              new BMap.Point(113.262132,23.156345),
              new BMap.Point(113.262232,23.155345),
              new BMap.Point(113.262332,23.154345),
              new BMap.Point(113.262432,23.153345),
              new BMap.Point(113.262532,23.152345),
              new BMap.Point(113.262632,23.151345),
              new BMap.Point(113.262732,23.150345),
          ];
          for (var i = 0, len = data.length; i < len; i++) {
              var pixel = mp.pointToPixel(data[i]);
              ctx.fillRect(pixel.x, pixel.y, 30, 30);
          }
      }


      function ComplexCustomOverlay(point, text, mouseoverText){
        this._point = point;
        this._text = text;
      }
      ComplexCustomOverlay.prototype = new BMap.Overlay();
      ComplexCustomOverlay.prototype.initialize = function(map){
        this._map = map;
        var div = this._div = document.createElement("div");
        div.style.position = "absolute";

        div.style.backgroundColor = "#EE5D5B";
       // div.style.border = "1px solid #BC3B3A";
        div.style.color = "white";
        // div.style.height = "18px";
        // div.style.padding = "12px";
        // div.style.lineHeight = "18px";

        div.style.borderRadius = '60px';
        div.style.width = '60px';
        div.style.height = '60px';
        div.style.lineHeight = "60px";
        div.style.textAlign = "center";





        div.style.whiteSpace = "nowrap";
        div.style.MozUserSelect = "none";
        div.style.fontSize = "11px"
        var span = this._span = document.createElement("span");
        div.appendChild(span);
        span.appendChild(document.createTextNode(this._text));      
        var that = this;

        var arrow = this._arrow = document.createElement("div");
        arrow.style.background = "red";
        arrow.style.position = "absolute";
        // arrow.style.width = "11px";
        // arrow.style.height = "10px";
        arrow.style.top = "22px";
        arrow.style.left = "10px";
        arrow.style.overflow = "hidden";
        div.appendChild(arrow);
      


      
        var eventThis = this;  
        div.addEventListener("click",function(e){
          mp.clearOverlays();//清除覆盖物
          mp.setZoom(15); //视角zoom
          console.log(e,'e',eventThis._text)
         // alert('bindClickFn');
        });

        // div.onclick = function(){
        //   alert('123');
        // }

        /*div.onmouseover = function(){
          this.style.backgroundColor = "#6BADCA";
          this.style.borderColor = "#0000ff";
          this.getElementsByTagName("span")[0].innerHTML = that._overText;
          arrow.style.backgroundPosition = "0px -20px";
        }

        div.onmouseout = function(){
          this.style.backgroundColor = "#EE5D5B";
          this.style.borderColor = "#BC3B3A";
          this.getElementsByTagName("span")[0].innerHTML = that._text;
          arrow.style.backgroundPosition = "0px 0px";
        }*/
        console.log(mp.getPanes().labelPane)
        mp.getPanes().labelPane.appendChild(div);
        
        return div;
      }
      ComplexCustomOverlay.prototype.draw = function(){
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
        this._div.style.top  = pixel.y - 30 + "px";
      }




      $('.toggle').click(function(){
       mp.clearOverlays();//清除覆盖物

        var point = new BMap.Point(113.262232,23.154345);
        mp.panTo(point);
        mp.setZoom(17); //视角zoom
       
        // var canvasLayer = new BMap.CanvasLayer({
        //     update: update
        // });
        //mp.addOverlay(canvasLayer);

        // var marker = new BMap.Marker(point); // 创建点
        // marker.addEventListener("click",function(){
        //   console.log(0)
        // });
        // mp.addOverlay(marker);    //增加点


        // canvasLayer.addEventListener("click",function(e){
        //   console.log('撒点绑定事件',e)
        // });




        var data = [
              new BMap.Point(113.262032,23.157345),
              new BMap.Point(113.262132,23.156345),
              new BMap.Point(113.262232,23.155345),
              new BMap.Point(113.262332,23.154345),
              new BMap.Point(113.262432,23.153345),
              new BMap.Point(113.262532,23.152345),
              new BMap.Point(113.262632,23.151345),
              new BMap.Point(113.262732,23.150345),
          ];



        data.forEach(function(item,index){
          var myCompOverlay = new ComplexCustomOverlay(item, new Date().getTime().toString().substring(9));
          mp.addOverlay(myCompOverlay);
        })



        // var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(113.262232,23.158345), "银湖海岸城",mouseoverTxt);
        // mp.addOverlay(myCompOverlay);






      })
  })
  </script> 
</html>